<template>
    <div class="change-school flex-center">
        <div id="information">
            <div class="top-title flex-center s-18 ">修改学校
                <div class="close pointer" @click="close">
                    <img class="pointer" src="../../../../assets/img/login/close.png" alt="">
                </div>
            </div>
            <el-form :model="school" label-width="92px" label-position="right" style="margin-top:30px">
                <el-form-item label="选择地区">
                    <el-select v-model="school.province" placeholder="选择省" :popper-append-to-body="false">
                        <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="school.city" placeholder="选择市" style="margin-lef" :popper-append-to-body="false">
                        <el-option v-for="item in cities" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="school.district" placeholder="选择区" :popper-append-to-body="false">
                        <el-option v-for="item in districts" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择学校">
                    <el-select v-model="school.eduLevelId" placeholder="选择学段" :popper-append-to-body="false" :disabled="true" @click.native.prevent="$message.warning('学段信息不可修改，请联系客服人员！')">
                        <el-option v-for="item in eduLevel" :key="item.id" :label="item.eduLevelName" :value="item.eduLevelId">
                        </el-option>
                    </el-select>
                    <div class="code-container">
                        <el-input v-arouse placeholder="输入学校名关键字搜索" v-model="school.schoolName" style="width:346px">
                        </el-input>
                        <div class="get-code tips" @click="search">搜索</div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="search-result">
                        <div class="search-tips flex-center" v-if="!searchIsclick">
                            <span class="s-16">请先选择省市区、学段</span>
                        </div>
                        <div v-if="searchArry.length===0 && searchIsclick && !addSchool" class="search-tips flex-center  s-18">
                            <span class="s-16" style="color: black">暂无搜索结果，请更换关键字</span>
                        </div>
                        <div class="scholl-list" v-if="searchArry.length>0 && searchIsclick">
                            <div v-for="v in searchArry" :key="v.id" :class="school.schoolName !== v.name ? 'bottom-input-div' : 'bottom-input-div-selected'" @click="selectSchool(v.id, v.name)">{{v.name}}</div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <button class="dis-button  complete-btn" type="button" :class="!disabled?'use-btn':''" :disabled="disabled" @click="submit">完成</button>
        </div>
    </div>
</template>

<script>
import school from '@/content/api/school'
import { SqlLib } from '../../../../../../../static/lib/sqlite/SqlLib'
import { SqlLibUser } from '../../../../../../../static/lib/sqlite/service/SqlLibUser'
export default {
    inject: ['getuser'],
    data () {
        return {
            user: {},
            school: {
                province: "",
                city: '',
                district: '',
                schoolName: '',
                schoolId: '',
                eduLevelId: ''
            },
            provinces: [],
            eduLevel: [],
            searchIsclick: false,
            searchArry: [],
        }
    },
    computed: {
        cities () {
            let arry = []
            this.provinces.some((v, i, arr) => {
                if (v.id === this.school.province) {
                    arry = arr[i].cities
                    return true
                }
            })
            return arry
        },
        districts () {
            let arry = []
            this.cities.some((v, i, arr) => {
                if (v.id === this.school.city) {
                    arry = arr[i].districts
                    return true
                }
            })
            return arry
        },
        disabled () {
            return !this.school.schoolId
        }
    },
    watch: {
        'school.province' (nval, oval) {
            if (oval === '') return
            this.school.city = ''
            this.school.district = ''
            this.school.schoolId = ''
            this.school.schoolName = ''
        },
        'school.city' (nval, oval) {
            if (oval === '') return
            this.school.district = ''
            this.school.schoolId = ''
            this.school.schoolName = ''
        },
        'school.district' (nval, oval) {
            if (oval === '') return
            this.school.schoolId = ''
            this.school.schoolName = ''
            this.search()
        }
    },

    mounted () {
        this.getAllArea()
    },
    methods: {
        getAllArea () {
            let sqlib = SqlLib.getInstance(window.$DBDIR)
            this.user = SqlLibUser.queryCurrentUser(sqlib)
            let schoolId = this.user.schoolId
            school.getAllArea().then(res => {
                this.provinces = res.returnValue.provinces
                if (res.code === '0') {
                    school.getEduLevels().then(res => {
                        let sqlib = SqlLib.getInstance(window.$DBDIR)
                        let user = SqlLibUser.queryCurrentUser(sqlib)
                        this.eduLevel = res.returnValue.filter(v => v.eduLevelId === user.eduLevelId)
                        this.school.eduLevelId = this.eduLevel[0].eduLevelId
                        school.getAreaAndEduLevel({ schoolId: schoolId }).then(res => {
                            console.log(res.returnValue)
                            if (res.code === '0') {
                                this.school.province = res.returnValue.provinceId || ''
                                this.school.city = res.returnValue.cityId || ''
                                this.school.district = res.returnValue.districtId || ''
                                // this.school.schoolId = ''
                                this.school.schoolName = this.user.schoolName
                                this.search()
                            }
                        })

                    })
                }
            })

        },
        async submit () {
            if (this.user.schoolId === this.school.schoolId) {
                this.close()
                return
            }
            const data = { schoolId: this.school.schoolId }
            let res = await school.updateSchool(data)
            if (res.code === '0') {
                let sqlib = SqlLib.getInstance(window.$DBDIR)
                let user = SqlLibUser.queryCurrentUser(sqlib)
                user.schoolName = this.school.schoolName
                user.schoolId = this.school.schoolId
                sqlib.updateObjectById(user)
                this.$emit('getuserInitial')
                this.getuser()
                this.$emit('update:dialog', '0')
                this.$message.success('更换成功')
            } else {
                this.$message.error(res.message)
            }
        },
        close () {
            this.$emit('update:dialog', '0')
        },
        async search () {
            this.addSchool = false;
            const data = {
                districtId: this.school.district,
                eduLevelId: this.school.eduLevelId
            };
            if (this.school.schoolName) {
                data.schoolName = this.school.schoolName;
            }
            let res = await school.getSchoolsByAreaId(data)
            if (res.code === '0') {
                this.searchArry = res.returnValue
                this.searchIsclick = true
            }
        },
        selectSchool (schoolId, schoolName) {
            this.school.schoolId = schoolId;
            this.school.schoolName = schoolName;
        },
    }

}
</script>

<style lang="scss">
.change-school {
    #information {
        height: auto;
        .close{
            img{
                cursor: pointer;
                width: 14px;
                height: 14px;
                margin-right: 10px;
            }
        }
    }
    .bottom-input-div-selected {
        background: #4893ff;
        border-radius: 8px;
        text-align: center;
        color: #ffffff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .el-input__inner {
            background-color: #fff;
            border: #fff;
            border-radius: 8px;
        }
    }
    .el-scrollbar__wrap {
        overflow-x: hidden;
    }
}
</style>